<template>
  <h2>{{ person }}</h2>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>工资：{{ job.j1.salary }}</h2>
<h2>当前求和{{ sum.y }}</h2>
  <button @click="sum.y++">+1</button>
  <button @click="sum={y:100}">替换对象</button>
  <button @click="name += '~'">改姓名</button>
  <button @click="age++">改年龄</button>
  <button @click="job.j1.salary++">涨工资</button>
</template>
  
  <script>
import {
 
  toRefs,
  reactive,
  computed,
  ref,
  watch,
  watchEffect,
  toRef,
  shallowReactive,
  shallowRef
} from "vue";
export default {
  name: "App",
  components: {},

  setup(props, context) {
  
    // let person =  shallowReactive({//浅层响应式数据 第一层
        let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    // 基本数据没差别
    // let sum =ref(0)
    // let sum = shallowRef(0)
    // y 不再试响应式的
    // sum是响应式的   里面的y 不是
    let sum = shallowRef({
      y:0
    })
    // 响应式的
    // let sum = ref({
    //   y:0
    // })
  
    
    return {person, ...toRefs(person),sum};
  },
};
</script>
  
  <style>
</style>
  